@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/mixins";

.referral-purchases-mobile {
	border: 1px solid var(--color-neutral-10);
	border-radius: 4px;
	margin-block-end: 1rem;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;

	.referral-purchases-mobile__header {
		display: flex;
		justify-content: space-between;
	}

	.referral-purchases-mobile__product-name {
		@include heading-medium;
		color: var(--color-gray-80);
	}

	h3 {
		@include heading-small;
		color: var(--color-gray-80);
	}

	p {
		@include body-medium;
		color: var(--color-gray-70);
		margin: 0;
	}
}

.referral-purchases-mobile__wrapper {
	overflow-y: auto;
}
